<template>
	<div class="shopmanage">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>交易中心</el-breadcrumb-item>
            <el-breadcrumb-item>资产招租</el-breadcrumb-item>
            <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true">
            <el-form-item label="城市：" >
                <el-select v-model="params.cityId" @change="loadis" filterable>
                    <el-option v-for="(item,index) in citys"
                               :key="index"
                               :label="item.city"
                               :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区域：" >
                <el-select v-model="params.areaId" @change="loadtrading" filterable>
                    <el-option v-for="(item,index) in districts"
                               :key="index"
                               :label="item.area"
                               :value="item.areaId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商圈：">
                <el-select v-model="params.tradingCode" filterable>
                    <el-option v-for="(item,index) in shopcircle"
                               :key="index"
                               :label="item.value"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="楼盘名称：">
                <el-input v-model.trim="params.devName " style="width: 217px"></el-input>
            </el-form-item>
            <el-form-item label="房源状态：">
                <el-select v-model="params.shopsStatus">
                    <el-option v-for="(item,index) in shopsStatu"
                               :key="index"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="releaseOrallunder(2)">发布</el-button>
                <el-button type="primary" @click="releaseOrallunder(1)">下架</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe v-loading="tableLoading" @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="80"></el-table-column>
            <el-table-column width="120" label="房源编号" prop="shopsCode" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="楼盘名称" prop="devName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="城市" prop="cityName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="区域" prop="areaName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="商圈" prop="tradingArea" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="类型" prop="type" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="面积" prop="area" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="租金（元/月）" prop="rent" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="单价" prop="unitPrice" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="适合营业" prop="operation" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="当前状态" prop="currentStatus" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="产权" prop="property" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="更新时间" prop="updateTime" :formatter="initTime" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="操作人" prop="userName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="房源状态" prop="shopsStatusName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="120" label="绑定人员" prop="brokerName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column width="180" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" :disabled="scope.row.shopsStatus != 1" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="look(scope.row.id)">查看</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.shopsCode)" :disabled="scope.row.shopsStatus != 1">删除</el-button>
                    <el-button type="text" size="small" v-if="scope.row.shopsStatus == 1" @click="release(scope.row.id,2)">发布</el-button>
                    <el-button type="text" size="small" v-else @click="release(scope.row.id,1)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[10, 20, 40, 50]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" style="margin-top:30px;">
    	</el-pagination>
	</div>
</template>

<script>
	import utils from "../../../common/utils"
	export default{
		name:"shopmanage",
		data(){
			return {
				tableData: [],
		        citys:[],
		        districts:[],
		        shopcircle:[],
		        loading:false,
		        shopsStatu:[
		            {value: "0", label: "全部"},
		            {value: "1", label: "待发布"},
		            {value: "2", label: "发布中"}
		        ],
		        params:{
		            cityId:"",
		            areaId:"",
		            devName:"",
		            shopsStatus:"0",
		            tradingCode:"",
		            pageNum: 1,
		            pageSize:10
		        },
		        tableLoading: false,
		        selections:[],
		        total:0
			}
		},
		methods:{
			initTime(row, column, cellValue, index){
				return utils.getTimeString(cellValue)
			},
			loadData() {
	            this.tableLoading = true;
	            this.$axios.post(`/tenement/shops/listPage`,this.params).then((res) => {
	                this.tableLoading = false;
                    this.tableData=res.list;
                    this.total=res.total;
	            });
	        },
	        loadCity(){
	            this.$axios.post(`/city/cityList`).then((res) => {
	                this.citys=res.cityList;
	            });
	        },
	        loadis(){
	            this.params.areaId=""
	            this.params.tradingCode=""
	            this.$axios.get(`/city/cityAreaList/${this.params.cityId}`).then((res) => {
	                this.districts=res.cityArealist;
	            });
	        },
	        loadtrading(){
	        	let formData=new FormData();
	        	formData.set("areaId",this.params.areaId)
	            this.params.tradingCode=""
	            this.$axios.post(`/tenement/trading/selectTradingByAreaId`,formData).then((res) => {
	                this.shopcircle=res
	            });
	        },
	        handleSizeChange(val) {
	            this.params.pageSize = val;
	            this.loadData();
	        },
	        handleCurrentChange(val) {
	            this.params.pageNum = val;
	            this.loadData();
	        },
	        handleSelectionChange(val){
	            this.selections=val;
	        },
	        query(){
	            this.params.pageNum=1
	            this.loadData()
	        },
	        releaseOrallunder(shopsStatus){
	            if(this.selections.length==0){
	                this.$alert('请选择至少一条数据进行操作', '提示', {
	                    confirmButtonText: '确定',
	                    type: 'error',
	                    callback:()=>{

	                    }
	                });
	                return;
	            }
	            let obj={};
	            let ids=[];
	            for(let i=0,len=this.selections.length;i<len;i++){
	                ids.push(this.selections[i].id)
	            }
	            obj.ids=ids;
	            obj.shopsStatus=shopsStatus;
	            obj.userId=JSON.parse(sessionStorage.getItem("cmsUser")).userId;
	            this.$confirm('确认执行此操作吗？', '提示', {
	                confirmButtonText: '确定',
	                cancelButtonText: '取消',
	                type: 'warning'
	            }).then(()=>{
	                this.$axios.post(`tenement/shops/updateShopsStatus`,obj).then((res)=>{
	                	this.$message({
							showClose: true,
							message: '操作成功',
							type: 'success',
							onClose:()=>{
                                this.loadData();
							}
						});
	                })
	            }).catch((error)=>{
	                console.log(error);
	            })

	        },
	        del(shopsCode){
	            this.$confirm('确认删除吗？', '提示', {
	                confirmButtonText: '确定',
	                cancelButtonText: '取消',
	                type: 'warning'
	            }). then(()=>{
	            	let formData=new FormData();
	            	formData.set("shopsCode",shopsCode)
	                this.$axios.post(`/tenement/shops/delete`, formData).then((res)=>{
	                	this.loadData();
	                	this.$message({
							message: '删除成功',
							type: 'success'
						});
	                })
	            }).catch(()=>{

	            })
	        },
	        release(id,shopsStatus){
	            let obj={
	                "ids":[id],
	                "shopsStatus":shopsStatus,
	                "userId":JSON.parse(sessionStorage.getItem("cmsUser")).userId
	            };
	            this.$confirm('确认执行此操作吗？', '提示', {
	                confirmButtonText: '确定',
	                cancelButtonText: '取消',
	                type: 'warning'
	            }).then(()=>{
	                this.$axios.post(`tenement/shops/updateShopsStatus`,obj).then((res)=>{
	                	this.$message({
							showClose: true,
							message: '操作成功',
							type: 'success',
							onClose:()=>{
                                this.loadData();
							}
						});
	                })
	            }).catch((error)=>{
	                console.log(error);
	            })

	        },
	        add(){
	        	this.$router.push({
	        		path:"/addoreditshop",
	        		query:{
	        			type:"add"
	        		}
	        	})
	        },
	        edit(id){
	        	this.$router.push({
	        		path:"/addoreditshop",
	        		query:{
	        			type:"edit",
	        			id:id
	        		}
	        	})
	        },
	        look(id){
	        	this.$router.push({
	        		path:"/lookshop",
	        		query:{
	        			id:id
	        		}
	        	})
	        }
		},
		created(){

		},
		mounted(){
			this.loadData();
			this.loadCity();
		}
	}
</script>

<style lang="stylus">
	.shopmanage{
		th,td{text-align: center}
		.el-table .cell{white-space: nowrap;}
	}
</style>

